<template>
    <section class="todoapp">
      <!-- 除了驼峰, 还可以使用-转换链接 -->
      <TodoHeader @add="addbtn" :list="list"></TodoHeader>
      <TodoMain :list="newList" @del="delbtn"></TodoMain>
      <TodoFooter :list="list" @isshow="fn" @clear="fun"></TodoFooter>
    </section>
  </template>
  
  <script>
  // 1.0 样式引入
  import "./styles/base.css"
  import "./styles/index.css"
  
  import TodoHeader from "./components/todolist/TodoHeader.vue"
  import TodoMain from "./components/todolist/TodoMain";
  import TodoFooter from "./components/todolist/TodoFooter";
  
  
  export default {
    components: {
      TodoHeader,
      TodoMain,
      TodoFooter,
    },
    data() {
      return {
        list: JSON.parse(localStorage.getItem('list'))||[],
        isShow:'all',
        newList:JSON.parse(localStorage.getItem('list'))||[],
      }
    },
    methods: {
      addbtn(val) {
        this.list.push(
          {
            id:this.list.length===0?100: this.list.at(-1).id + 1,
            name: val,
            isDone: false,
          }
        )
      },
      delbtn(val){
        this.list.splice(val,1)
      },
      fn(val){
        this.isShow=val
         if(this.isShow==='yes'){
          this.newList=this.list.filter(item=>item.isDone)
         }else if(this.isShow==='no'){
          this.newList=this.list.filter(item=>!item.isDone)
         }else{
           this.newList=this.list
         }
      },
      fun(){
      this.list= this.list.filter(item=>!item.isDone)
      }
    },
    watch:{
      list:{
        deep: true,
        handler(){
          localStorage.setItem('list', JSON.stringify(this.list))
          this.newList=this.list
        }
      },
    }
  };
  </script>